<template>
  <div class="testing-detail">
    <van-sticky>
      <van-nav-bar :title="$route.meta.title" left-arrow @click-left="onClickLeft" style="width:100%;" />
    </van-sticky>
    <van-cell-group>
      <van-field label="商品视频" value="暂无视频" center readonly class="video-name" v-if="videourl.length==0" input-align="right" />
      <van-field label="商品视频" center readonly class="video-name" v-if="videourl.length!=0" input-align="right">preview-cover
        <template #right-icon>
          <van-uploader v-model="videourl" :max-count="1" :deletable="false" @click-preview="players = true">
            <!-- 封面插槽 -->
            <template #preview-cover>
              <van-image :src="require('@/assets/player.png')" width="100%" height="100%" fit="cover" class="preview-img" />
            </template>
          </van-uploader>
        </template>
      </van-field>
      <van-field label="商品图片" center readonly>
        <template #right-icon>
          <van-uploader v-model="imgurls" :max-count="max_count" :deletable="false" />
        </template>
      </van-field>
      <van-field label="商品生产者" :value="eInfo.spf_name" input-align="right" readonly />
      <van-field label="名称" :value="eInfo.name" input-align="right" readonly />
      <van-field label="价格" :value="eInfo.price" input-align="right" readonly />
      <van-field label="重量" :value="eInfo.weight" input-align="right" readonly />
      <van-field label="商品主料" :value="eInfo.sidedish" type="textarea" autosize input-align="right" readonly />
      <van-field label="商品描述" :value="eInfo.remark" type="textarea" autosize input-align="right" readonly />
      <van-field label="生产日期" :value="eInfo.manufacturedate" input-align="right" readonly />
      <van-field label="保质期" :value="eInfo.qualityperiod" input-align="right" readonly />
      <van-field label="库存" :value="eInfo.stocknum" input-align="right" readonly />
    </van-cell-group>
    <!-- 用于查看未审批的内容 -->
    <div class="recommend" v-if="idx!=0 && utype==0">
      <van-field v-model="recommend" rows="4" autosize label="审批意见" type="textarea" maxlength="150" placeholder="请输入审批意见及理由" show-word-limit required />
    </div>
    <!-- 用于查看已审批的内容 -->
    <div class="recommend" v-if="idx==0">
      <van-field v-model="eInfo.recommend" rows="4" autosize label="审批意见" type="textarea" placeholder="请输入审批意见及理由" show-word-limit readonly />
    </div>
    <br>
    <div class="opera" v-if="idx!=0 && utype==0">
      <van-button round type="default" @click="approvaling(3)">不通过</van-button>
      <van-button round type="danger" color="#ff976a" @click="approvaling(1)">通过</van-button>
    </div>
    <!-- 视频播放 -->
    <van-popup v-model="players" @close="stopPlay" :close-on-click-overlay="false" :style="{ height: '100%' }" position="bottom" closeable>
      <video ref="curr_video" :src="play_video" autoplay="autoplay" width="100%" height="100%" controls></video>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  name: "QualityTestingDetail",
  data () {
    return {
      id: '',
      utype: '',
      idx: '', // 用于判断当前商品是否审批过, 0 则不显示操作按钮
      recommend: '',
      eInfo: {},
      imgurls: [],
      max_count: '',
      videourl: '',
      play_video: '',
      edit_vdo: [],
      players: false,
    };
  },
  methods: {
    onClickLeft () {
      this.$router.push({ name: 'testing', query: { active: 2, } })
    },
    // 关闭遮罩层停止播放视频
    stopPlay () {
      if (this.players == false) {
        this.$refs.curr_video.pause()
      }
    },
    // 编辑
    approvaling (status) {
      this.$axios("/products/checkproducts", {
        prod_id: this.id,
        handle: "ajax", //不填即返回数据，填即是提交审核
        status: status, //1-审核通过；3-审核拒绝
        recommend: this.recommend //审核意见
      })
        .then((res) => {
          if (res.data.code == 1) {
            Toast.success("已审批");
            setTimeout(() => {
              this.$router.push({ name: "testing", query: { active: 2, } });
            }, 1000);
          } else {
            Toast.fail("操作失败");
          }
        });
    },
    // 查看
    getTestingList () {
      this.$axios("/products/checkproducts", {
        prod_id: this.id,
      })
        .then((res) => {
          if (res.data.code == 1) {
            this.eInfo = res.data.data
            let imgarr = (this.eInfo.menuimage || '').split(',')
            var edit_vdo = (this.eInfo.menuvideo || '').split(',')
            this.max_count = imgarr.length
            this.imgurls = imgarr.map(item => {
              return { url: this.img + item }
            })
            if (this.eInfo.menuvideo != null || this.pdata.menuvideo != "") {
              edit_vdo = (this.eInfo.menuvideo || '').split(',')
              this.videourl = edit_vdo.map(item => {
                return { url: this.img + item }
              })
              this.play_video = this.videourl[0].url
            } else {
              this.videourl = []
            }
          } else {
            Toast.fail(res.data.msg);
          }
        });
    },
  },
  created () {
    this.utype = JSON.parse(localStorage.getItem("userInfo")).user.utype
    this.id = this.$route.query.sid;
    this.idx = this.$route.query.index;
    this.getTestingList()
  },
};
</script>
<style lang="less" scoped>
.testing-detail {
  display: flex;
  flex-direction: column;
  /deep/ .van-uploader__file,
  /deep/ .van-uploader__upload,
  /deep/ .van-uploader__preview,
  /deep/ .van-uploader__preview-image {
    border-radius: 15px;
    width: 1.1rem;
    height: 1.1rem;
  }
  .video-name {
    /deep/ .van-uploader__file-name {
      display: none;
    }
  }
  .preview-img {
    /deep/ .van-image__img {
      border-radius: 15px;
    }
  }
  .recommend {
    display: flex;
    margin-top: 15px;
    /deep/ .van-field__value {
      box-sizing: border-box;
      padding: 15px;
      background-color: #f5f5f5;
      border-radius: 10px;
    }
  }
  .opera {
    display: flex;
    width: 80%;
    justify-content: space-around;
    margin: 50px auto;
    /deep/ .van-button--round {
      width: 200px;
      height: 80px;
      font-size: 35px;
      font-weight: bold;
      box-shadow: 0 5px 5px rgba(37, 26, 26, 0.1);
    }
  }
}
</style>